<template>
	<view class="modal">
		<tn-popup v-model="show" mode="center">
			<view class="pop">
				<view class="title" v-if="type == 1">{{content}}</view>
				<view class="couplet-title" v-if="type == 2">{{content}}</view>
				<view class="list-nape" v-if="type == 3">
					<block v-for="(item,index) in content" :key="index">
						<view class="list-item">{{item.name}}</view>
					</block>
				</view>
				<view class="btn-list tn-flex">
					<view class="btn-left" @click="cancel">
						{{leftTex}}
					</view>
					<view class="btn-right" @click="confirm">
						{{rightTex}}
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	export default {
		props:{
			leftTex:{
				type:String,
				default:'取消'
			},
			rightTex:{
				type:String,
				default:'确定'
			},
			content:{
				type:String | Array,
				default:'抱歉，余额不足'
			},
			type:{
				type:String | Number,
				default:'1'
			}
		},
		data() {
			return {
				show:false
			}
		},
		methods:{
			// 开启
			open(){
				this.show = true
			},
			// 关闭
			close(){
				this.show = false
			},
			// 左边文字(取消)
			cancel(){
				this.$emit('cancel')
				this.show = false
			},
			// 右边文字(确定)
			confirm(){
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		.pop{
			width: 630rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			.title{
				height: 173rpx;
				color: #333333;
				text-align: center;
				line-height: 173rpx;
				border-bottom: 1px solid #dddddd;
			}
			.couplet-title{
				color: #FFFFFF;
				border-bottom: 1px solid #dddddd;
				padding:48rpx;
			}
			.list-nape{
				color: #333333;
				padding:48rpx;
				font-size: 32rpx;
			}
			.btn-list{
				height: 117rpx;
				font-size: 32rpx;
				font-weight: 400;
				view{
					flex: 1;
					text-align: center;
					line-height: 117rpx;
				}
				.btn-left{
					color: #333333;
					border-right: 1px solid #dddddd;
				}
				.btn-right{
					color: #9D5EF4;
				}
			}
		}
		/deep/.tn-popup__content__center_box{
			background-color: transparent;
		}
	}

</style>
